<template>
	<view class="activity u-flex-between">
		<view class="activity-content" :style="{backgroundImage:`url(${$getImageUrl(superBase)})`}"
			@click.stop="$navigateTo('/subPackages/cross-border/index')" v-if="crossBorderList.length > 0 ">
			<view class="title u-flex-center">
				<view class="text">跨境拼团</view>
			</view>
			<view class="li-box u-flex">
				<view class="li" v-for="(i,l) in crossBorderList" :key="l"
					@click.stop="$navigateTo('/subPackages/product/product-detail?product_id='+i.product_id)">
					<view class="li-image">
						<u-image :src="i.product.cover_image || ''" width="108rpx" height="108rpx"></u-image>
					</view>
					<view class="li-price u-flex-center" :style="{backgroundImage:`url(${activityBase})`}">
						<view class="price u-flex-center u-col-end">
							<span style="font-size: 20rpx;line-height: 1;">￥</span>
							<span style="font-size: 28rpx;line-height: 1;">{{i.product.minPriceSpec.price}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="activity-content" :style="{backgroundImage:`url(${$getImageUrl(goodsBase)})`}"
			@click.stop="$navigateTo('/subPackages/activity/index')" v-if="activityProductList.length > 0 ">
			<view class="title u-flex-center">
				<view class="text">全球尖货</view>
			</view>
			<view class="li-box u-flex">
				<view class="li" v-for="(v,k) in activityProductList" :key="k"
					@click.stop="$navigateTo('/subPackages/product/product-detail?product_id='+v.id)">
					<view class="li-image">
						<u-image :src="v.cover_image || ''" width="108rpx" height="108rpx"></u-image>
					</view>
					<view class="li-price u-flex-center" :style="{backgroundImage:`url(${$getImageUrl(activityBase)})`}">
						<view class="price u-flex-center u-col-end">
							<span style="font-size: 20rpx;line-height: 1;">￥</span>
							<span style="font-size: 28rpx;line-height: 1;">{{v.price}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				superBase: '/images/super-base.png',
				goodsBase: '/images/goods-base.png',
				activityBase: '/images/recommendBase.png',
			}
		},
		props: {
			crossBorderList: {
				type: Array,
				default: (() => {
					return [];
				})
			},
			activityProductList: {
				type: Array,
				default: (() => {
					return [];
				})
			}
		},
		methods: {}
	}
</script>

<style lang="scss">
	.activity {
		margin-top: 30rpx;

		.activity-content {
			width: 340rpx;
			padding: 20rpx 40rpx 20rpx 30rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.title {
				font-size: 28rpx;
				color: #AB5200;
				width: 152rpx;
				height: 46rpx;
				background: linear-gradient(180deg, #FFFFFF 0%, #E8BD89 100%);
				line-height: 1;
				border-radius: 8rpx;
			}

			.li-box {
				display: grid;
				grid-column-gap: 40rpx;
				grid-template-columns: 1fr 1fr;
				padding: 22rpx 0 0 10rpx;

				.li {

					.li-image {
						width: 108rpx;
						height: 108rpx;
						border-radius: 4rpx;
						border: 2rpx solid #DEB97B;
					}

					.li-price {
						line-height: 1;
						width: 100%;
						height: 37rpx;
						margin-top: 30rpx;
						color: #FFFFFF;
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}
				}
			}
		}
	}
</style>